<template>
	<view class="detail-content bg-#F6F9F8 h-100vh">
		<view :style="{ height: statusBarHeight + 'px' }">
			<custom_navbar :title="navbar_title" theme="light" />
		</view>
		<view class="detail-tips" v-if="isOpenLocation" :style="{top: statusBarHeight + 'px'}">
			<text>开启定位，体验AR导航</text>
			<view class="detail-open" @click="openLocation()">去开启</view>
		</view>
		<view class="detail-banner" v-if="banList.length > 0">
			<swiper
				class="swiper"
				circular
				:current="curBanner"
				:indicator-dots="true"
				indicator-color="rgba(255, 255, 255, .3)"
				indicator-active-color="#fff"
				:autoplay="(detail.video && !isVideoEnd) ? false : true"
				:interval="5000"
				:duration="300"
				@change="handleSwiper"
			>
				<swiper-item class="detail-video" v-if="detail.video">
					<video
						id="myVideo" 
						autoplay
						:src="detail.video"
						controls
						muted
						show-mute-btn
						@ended="onVideoEnd"
						@play="onVideoPlay"
					></video>
				</swiper-item>
				<swiper-item v-for="(item, index) in banList" :key="index">
					<image class="swiper-img" :src="rec_url + item" mode=""></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="detail-top" v-if="detail.name">
			<view class="detail-title">{{ detail.name }}</view>
			<view class="detail-tag">{{ detail.grade }}A景区</view>
		</view>
		<view class="detail-audio" v-if="detail.audio && audio_show">
			<audio_custom :src="detail.audio" @handleAudio="handleAudio" ref="myAudio" />
		</view>
		<view class="detail-text">
			<u-parse :html="detail.content"></u-parse>
		</view>
		<view class="detail-bottom">
			<view @click="goPunch" class="detail-bottom-btn punch-btn">
				<image class="btn-img" src="../../static/images/punch.png" />
				景点打卡
			</view>
			<view @click="go_ar" class="detail-bottom-btn">
				<image class="btn-img" src="../../static/images/map_nav.png" />
				地图导航
			</view>
		</view>
	</view>
</template>

<script>
import { navigateTo, navigateBack } from "@/hooks";
import { scenicSpotInfo } from "@/api/home.js";
import uParse from '@/components/u-parse/u-parse.vue';
import custom_navbar from "@/components/custom_navbar/index.vue";
import audio_custom from "@/components/audio_custom/index.vue"
import store from "@/store";

export default {
	components: { custom_navbar, uParse, audio_custom },
	data() {
		return {
			navigateTo,
			navigateBack,
			navbar_title: "景区详情",
			statusBarHeight: 0,
			videoContext: null,
			playShow: false, //播放的图片
			stopShow: false, //暂停的图片
			lock: false, // 锁
			status: 1, // 1暂停 2播放
			currentTime: 0,  //当前进度
			duration: 100, // 总进度
			audioContext: null,
			detail: {},
			isOpenLocation: false,
			banList: [],
			curBanner: 0,
			isVideoEnd: false
		}
	},
	onLoad(options) {
		uni.showLoading({ title: '加载中' });

		// 是否已经获得地理授权
		wx.getSetting({
			success: res => {
				if (res.authSetting['scope.userLocation']) {
					// 已经授权，可以直接调用获取位置信息的方法
					this.getLocation();
				} else {
					// 未授权，展示一个提示框，引导用户去授权
					this.showAuthorizePrompt();
					this.isOpenLocation = true;
				}
			}
		});
		this.getDetail(options.id);

		this.videoContext = uni.createVideoContext('myVideo');
		this.audioContext = uni.createVideoContext('myAudio');
	},
	mounted() {
		let that = this;
		const info = uni.getSystemInfoSync();
		that.statusBarHeight = info.statusBarHeight + 43;
	},
	computed: {
		rec_url() {
			return this.$store.getters.rec_url;
		},
		audio_show() {
			return this.$store.getters.audio_show;
		}
	},
	methods: {
		handleAudio(playShow) {
			if (this.curBanner == 0) {
				this.videoContext.pause();
			}
		},
		getDetail(id) {
			const that = this;
			let params = { spot_id: id };
			scenicSpotInfo(params).then(res => {
				if (res.code == 200) {
					let data = { ...res.data };
					if (res.data.video) {
						data.video = this.rec_url + res.data.video;
					}
					if (res.data.audio) {
						store.commit("userInfo/set_audio_show", true);
						data.audio = this.rec_url + res.data.audio;
					}
					if (res.data.banner) {
						this.banList = JSON.parse(res.data.banner);
					}
					this.navbar_title = res.data.name + "详情";

					let richtext = res.data.content;
					const regex = new RegExp('<img', 'gi');
					const regexVideo = new RegExp('<video', 'gi');
					// richtext = richtext.replace(regex, '<img style="max-width: 100%;"');
					richtext = richtext.replace(regexVideo, '<video style="width: 100%;"');
					richtext = richtext.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, (match, capture) => {
						if (capture.indexOf('http') == -1) {
							return `<img style="display: block; max-width: 100%;" src="${this.rec_url + capture}">`;
						} else {
							return `<img style="display: block; max-width: 100%;" src="${capture}">`;
						}
					});
					data.content = richtext;
					that.detail = data;

					uni.hideLoading();
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'none',
					});
				}
			})
		},
		showAuthorizePrompt() {
			const that = this;
			wx.authorize({
				scope: 'scope.userLocation',
				success: () => {
					// 用户同意授权后，再次调用获取位置信息的方法
					this.getLocation();
					this.isOpenLocation = false;
				},
				fail: () => {
					// 用户拒绝授权，可以提示用户开启位置权限的重要性
					uni.showModal({
						title: '提示',
						content: '是否重新开启定位权限，你的位置将用于地图导航功能',
						success: function (res) {
							if (res.confirm) {
								that.openLocation();
							}
						}
					});
				}
			});
		},
		getLocation() {
			wx.getLocation({
				type: 'gcj02 ', // 默认为 wgs84 返回 gps 坐标，gcj02 返回可用于地图的坐标
				success: (res) => {
					// console.log('已获取到当前位置：', res);
				},
				fail: (err) => {
					// console.error('获取位置信息失败：', err);
				}
			});
		},
		openLocation() {
			wx.openSetting({
				success: (res) => {
					// console.log('重新获取地址成功：', res);
					if (res.authSetting['scope.userLocation']) {
						// 已经授权，可以直接调用获取位置信息的方法
						this.getLocation();
						this.isOpenLocation = false;
					} else {
						// 未授权，展示一个提示框，引导用户去授权
						this.showAuthorizePrompt();
					}
				}
			});
		},
		go_ar() {
			store.commit("userInfo/set_audio_show", false);
			uni.setStorageSync("scenic_detail", JSON.stringify({...this.detail, spot_id:this.detail.id}));
			this.navigateTo('/pagesA/ar_navigation/index');
		},
		goPunch() {
			this.navigateTo(`/pagesA/scenic_punch/index?id=${this.detail.id}`);
		},
		handleSwiper(e) {
			if (e.target.current != 0) {
				this.videoContext.pause();
			} else {
				this.videoContext.play();
			}
			this.curBanner = e.target.current;
		},
		onVideoEnd(event) {
			this.isVideoEnd = true;
			this.curBanner = 1;
		},
		onVideoPlay() {
			this.isVideoEnd = false;
			this.$refs.myAudio.stop();
		}
	}
}
</script>

<style lang="scss" scoped>
.detail-content {
	.u-nav-slot {
		width: 174rpx;
		height: 64rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #ffffff98;
		border-radius: 32rpx;
		border: 1rpx solid #97979733;
	}

	.detail-tips {
		position: fixed;
		width: calc(100vw - 48rpx);
		height: 72rpx;
		padding: 0 24rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-weight: 400;
		font-size: 28rpx;
		color: #FF9900;
		background-color: #F8EEC6;
		z-index: 99;

		.detail-open {
			width: 136rpx;
			height: 52rpx;
			line-height: 52rpx;
			text-align: center;
			color: #fff;
			background: #FF9900;
			border-radius: 40rpx;
		}
	}

	.detail-video {
		width: 100%;
		height: 484rpx;
		margin-bottom: 32rpx;

		#myVideo {
			width: 100%;
			height: 100%;
		}
	}

	.detail-top {
		margin: 0 24rpx 24rpx;
		display: flex;
		align-items: center;
		font-weight: 700;
		font-size: 36rpx;
		color: #3D3D3D;

		.detail-tag {
			margin-left: 16rpx;
			width: 102rpx;
			height: 36rpx;
			line-height: 35rpx;
			text-align: center;
			font-weight: 400;
			font-size: 24rpx;
			background: #FFDF01;
			border-radius: 8rpx;
		}
	}

	.detail-banner {
		width: 100%;
		height: 484rpx;
		margin-bottom: 32px;
		.swiper {
			width: 100%;
			height: 484rpx;
			.swiper-img {
				width: 100%;
				height: 484rpx;
			}
		}
	}

	.detail-audio {
		margin: 0 24rpx;
		height: 144rpx;
		background: linear-gradient(-90deg, rgba(15, 188, 214, 0.2) 0%, rgba(12, 202, 145, 0.2) 100%);
		border-radius: 24rpx;

		.audio-show {
			display: flex;
			align-items: center;
			padding: 24rpx;

			.audio-poster {
				width: 96rpx;
				height: 96rpx;
			}

			.audio-btn {
				width: 56rpx;
				height: 56rpx;
			}

			.play-slider {
				width: 76%;
				position: relative;

				.detail-time {
					position: absolute;
					bottom: -20rpx;
					width: 88%;
					padding: 0 50rpx 0 30rpx;
					display: flex;
					justify-content: space-between;
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;
				}
			}
		}
	}

	.detail-text {
		background-color: #F6F9F8;
		margin-top: 40rpx;
		padding: 0 24rpx 160rpx;
	}

	.detail-bottom {
		position: fixed;
		bottom: 0;
		width: calc(100vw - 60rpx);
		display: flex;
		justify-content: space-between;
		padding: 12rpx 30rpx 56rpx;
		background-color: #fff;
		border-top: 1px solid #E4E4E4;

		.detail-bottom-btn {
			width: 48%;
			height: 80rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-weight: 700;
			font-size: 30rpx;
			color: #FFFFFF;
			background: linear-gradient(90deg, #0FBCD6 0%, #0CCA91 100%);
			border-radius: 40rpx;

			.btn-img {
				width: 48rpx;
				height: 48rpx;
				margin-right: 12px;
			}
		}

		.punch-btn {
			color: #0CCA92;
			background: linear-gradient( -90deg, rgba(33,188,145,0.2) 0%, rgba(183,228,71,0.2) 100%);
		}
	}
}
</style>
